
import React, { useState, useEffect } from 'react';
import useStore from '@/store/index'
import { searchVipApi } from '@/api/vip/vip'
import { Button, Card, Space, Form, Input, Select, message, Row, Modal ,Radio} from 'antd';
import { Table } from 'antd';
import { changeScoreApi } from '@/api/package/package';

const { Search } = Input;




const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 16,
    },
  },
};

const columns: any = [
  {
    title: '姓名',
    dataIndex: 'vipName',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: '电话',
    dataIndex: 'vipPhone',
  },
  {
    title: '等级',
    dataIndex: 'vipRank',
  },
  {
    title: '余额',
    dataIndex: 'money',
  },
  {
    title: '积分',
    dataIndex: 'score',
  },
];





export default function PointCg() {
  const [form] = Form.useForm();
  const userInfo = useStore<any>((state: any) => state.userInfo)
  // 会员搜索结果
  const [vipData, setVipData] = useState<any>();
  const [vipCum, setVipCum] = useState<any>();
  const [score, setScore] = useState<any>(0);
  useEffect(() => {
    
  }, [])
  const onFinish = async (values: any) => {
    if(!vipCum){
        return message.error('请先选择会员')
    }else{
        let params:any = {}
        params.id=vipCum.id
        params.score=score
    let res:any = await changeScoreApi(params)
    if(res.code == 200){
        message.success(res.msg)
        setScore(0)
        setVipData([])
        setVipCum('')
    }else{
        message.error(res.msg)
    }
    }
  };
  const searchVip = (value: any) => {
    console.log('关键字', value);
    let params = {
      keyWord: value,
      belongToShop: userInfo.storeId
    }
    if (!value) {
      setVipCum('')
    }
    searchVipApi(params).then(searchRes => {
      if (searchRes.code == 200) {
        let newVip = searchRes.viplist.map((viplist_item) => {
          return {
            "id": viplist_item.id,
            'key': viplist_item.id,
            "vipName": viplist_item.vipName,
            "sex": viplist_item.sex,
            "vipPhone": viplist_item.vipPhone,
            "vipRank": viplist_item.vipRank,
            "money": viplist_item.money,
            "score": viplist_item.score,
          }
        })
        setVipData(newVip)

        message.open({
          type: 'success',
          content: searchRes.msg,
        });
      } else {
        setVipData('')
        message.open({
          type: 'error',
          content: searchRes.msg,
        });
      }
    })

  }
  
  const rowSelection = {
      onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
        setScore(selectedRows[0].score)
        if(selectedRows.length > 1){
          setVipCum(selectedRows[0])
        setScore(selectedRows[0].score)
        }else{
          setVipCum(selectedRows[0])
          setScore(selectedRows[0].score)
        }
      },
      getCheckboxProps: (record: any) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    };
    const jia = ()=>{
        setScore(score *1 + 50)
    }
    const jian= ()=>{
        setScore(score* 1 - 50)
    }
  return (
    <div>

      <Space direction="vertical" size={16}>

        <Card size="small" title="会员积分变动" style={{ width: '100%' }}>
          <Form
            form={form}
            name="register"
            onFinish={onFinish}
            initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}
            style={{ width: 600 }}
            scrollToFirstError
          >
            <div>
              <Search
                placeholder="手机号/会员卡号/姓名"
                allowClear
                enterButton="查询"
                style={{ width: 500 }}
                onSearch={searchVip}
              />
            </div>
            <div style={{ display: 'flex', justifyContent: "space-between", marginTop: '10px' }}>
              <p>姓名：<span style={{ color: 'red' }}>{vipCum ? vipCum.vipName : 'XXX'}</span></p>
              <p>电话：<span style={{ color: 'red' }}>{vipCum ? vipCum.vipPhone : 'XXX'}</span></p>
              <p>等级：<span style={{ color: 'red' }}>{vipCum ? vipCum.vipRank : 'XXX'}</span></p>
              <p>余额：<span style={{ color: 'red' }}>{vipCum ? vipCum.money : 'XXX'}</span></p>
              <p>积分：<span style={{ color: 'red' }}>{vipCum ? vipCum.score : 'XXX'}</span></p>
            </div>
            <div>
              <Table
                rowSelection={{
                  type: 'radio',
                  ...rowSelection,
                }}
                columns={columns}
                dataSource={vipData}
                pagination={false}
                showHeader={false}
              />
            </div>
           <div>
            {/* 请输入积分 */}
            积分修改为：
            <Input value={score} onChange={e=>setScore(e.target.value)}></Input>
            <Button onClick={jian}>减50</Button>
            <Button  onClick={jia}>加50</Button>
            
           </div>
            <Form.Item {...tailFormItemLayout}>
              <Button style={{ marginRight: '20px', marginTop: '20px' }} >
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                变动
              </Button>
            </Form.Item>
          </Form>

        </Card>

      </Space>
    
    </div>
  )
}